<script lang="ts">
  import type { BreadcrumbItem , BreadcrumbContext } from "./conf"
  import { getContext } from 'svelte';
  export let item: BreadcrumbItem;
  const { activeBreadcrumb$, getIndex } = getContext<BreadcrumbContext>('breadcrumbs')
  const index = getIndex(item)
  $: isActive = $activeBreadcrumb$ === index
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<li class="breadcrumb" class:active={isActive} >
  <a class:cursor-pointer={!isActive}  href={item.href}>
    <slot {item} />
  </a>
</li>
<style lang="postcss">
  .breadcrumb {
    @apply px-5 py-1 border-b-2 border-gray-700 flex border-none;
  }
  .breadcrumb:hover {
    @apply border-dotted;
    color: #66b851;
    border-color: #66b851;
  }
  .active, .active:hover {
    @apply border-solid;
    color: #66b851;
    border-color: #66b851;
  }
</style>